<template>
  <view :data-theme="theme">
    <tui-skeleton v-if="showSkeleton"></tui-skeleton>
    <view class='productSort' :style="{visibility: showSkeleton ? 'hidden' : 'visible', height: winHeight+ 'px' }">
      <image style="width: 2.4vh;height: 2.4vh;line-height: 2.4vh;position: absolute;left: 12rpx;top: 14rpx;"
             src="https://fengqinghui.oss-cn-hangzhou.aliyuncs.com//6785d6f9dfa68b39f1789838fdeca68a81e2cf9675ed976dae23db2c7b601b24.png">
      </image>
      <view style="background-color: #00AAEA;height: 60rpx;width: 20%;position: absolute;top: 0;left: 50rpx;line-height: 60rpx;" @click="jumpArea">西湖区</view>
      <view class='header acea-row row-center-wrapper block'>
        <view class='acea-row row-between-wrapper input'>
          <text class='iconfont icon-sousuo'></text>

          <input type='text' placeholder='点击搜索商品信息' @confirm="searchSubmitValue" confirm-type='search'
                 name="search" style="width: 74%;background-color: red;position: relative;right:-22rpx;"
                 placeholder-class='placeholder' maxlength="20"/>
          <view class="block" style="background-color: #00AAEA;height: 100%;width: 20%;position: relative;right:-22rpx;border-radius: 0 45% 45% 0;line-height: 60rpx;text-align: center">搜索</view>
        </view>
      </view>
      <classification style="margin-top: -60rpx" :headerDisplay="false"></classification>
<!--      <view class="con-box">-->
<!--        <view class='aside'>-->
<!--          <scroll-view scroll-y="true" style="height: 100%; overflow: hidden;" scroll-with-animation='true'-->
<!--                       :scroll-into-view="intoindex">-->
<!--            <view v-for="(item,index) in productList" :key="item.id">-->
<!--              <view class='item acea-row row-center-wrapper' :class='index==navActive?"on":""'-->
<!--                    v-if='item.childList && item.childList.length > 0'-->
<!--                    :key="item.id" @click='tap(index,"b"+item.id)' :id='"sort"+index'>-->
<!--                <text class="item_text skeleton-rect">{{ item.name }}</text>-->
<!--              </view>-->
<!--            </view>-->
<!--          </scroll-view>-->
<!--        </view>-->
<!--        <view class='conter'>-->
<!--          <scroll-view scroll-y="true" :scroll-into-view="toView" style="height: 100%; overflow: hidden;"-->
<!--                       @scroll="scroll" scroll-with-animation='true'>-->
<!--            <view v-for="(p,i) in productList" :key="p.id">-->
<!--              <view class='listw' :id="'b'+p.id+index" v-for="(item,index) in p.childList" :key="item.id">-->
<!--                <view class='title acea-row'>-->
<!--                  <view class='name skeleton-rect'>{{ item.name }}</view>-->
<!--                </view>-->
<!--                <view class='list acea-row'>-->
<!--                  <block v-for="(itemn,indexn) in item.childList" :key="itemn.id">-->
<!--                    <navigator hover-class='none'-->
<!--                               :url='"/pages/goods/goods_list/index?cid="+itemn.id+"&title="+itemn.name'-->
<!--                               class='item acea-row row-column row-middle'>-->
<!--                      <view class='picture skeleton-rect'>-->
<!--                        <easy-loadimage mode="widthFix" :image-src="itemn.icon"></easy-loadimage>-->
<!--                      </view>-->
<!--                      <view class='name line1'>{{ itemn.name }}</view>-->
<!--                    </navigator>-->
<!--                  </block>-->
<!--                </view>-->
<!--              </view>-->
<!--            </view>-->
<!--            <view :style='"height:"+(bottomheight-300)+"rpx;"'></view>-->
<!--          </scroll-view>-->
<!--        </view>-->
<!--      </view>-->
    </view>
    <view v-if="bottomNavigationIsCustom" class="footerBottom"></view>
<!--    <pageFooter></pageFooter>-->
  </view>
</template>
<script>
import Classification from "../../components/homeIndex/classification.vue";

let app = getApp();
import {getCategoryList} from '@/api/product.js';
import easyLoadimage from '@/components/base/easy-loadimage.vue';
import {mapGetters} from "vuex";
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
import pageFooter from "@/components/pageFooter/index.vue";
import animationType from '@/utils/animationType.js'

export default {
  components: {
    Classification,
    easyLoadimage,
    tuiSkeleton,
    pageFooter
  },
  computed: mapGetters(['bottomNavigationIsCustom']),
  data() {
    let active = 0;
    // #ifdef H5
    active = location.hash.substr(1);
    // #endif
    return {
      theme: app.globalData.theme,
      showSkeleton: true, //骨架屏显示隐藏
      navlist: [],
      hotList: [], //推荐分类
      productList: [
        {
          name: 'skeleton', id: 0,
          childList: [
            {
              name: 'skeleton', id: 10, childList: [
                {name: '', id: 101,},
                {name: '', id: 102,},
                {name: '', id: 103,},
                {name: '', id: 104,},
                {name: '', id: 105,},
                {name: '', id: 106,}
              ]
            },
            {
              name: 'skeleton', id: 1,
              childList: [
                {name: '', id: 101,},
                {name: '', id: 102,},
                {name: '', id: 103,},
                {name: '', id: 104,},
                {name: '', id: 105,},
                {name: '', id: 106,}
              ]
            },
            {name: '', id: 20}
          ]
        },
        {
          name: 'skeleton', id: 2,
          childList: [{name: 'skeleton', id: 30}]
        },
        {
          name: 'skeleton', id: 3,
          childList: [{name: 'skeleton', id: 31}]
        },
        {
          name: 'skeleton', id: 4,
          childList: [{name: 'skeleton', id: 32}]
        },
        {
          name: 'skeleton', id: 5,
          childList: [{name: 'skeleton', id: 33}]
        },
        {
          name: 'skeleton', id: 6,
          childList: [{name: 'skeleton', id: 34}]
        },
        {
          name: 'skeleton', id: 7,
          childList: [{name: 'skeleton', id: 35}]
        },
        {
          name: 'skeleton', id: 8,
          childList: [{name: 'skeleton', id: 36}]
        },
        {
          name: 'skeleton', id: 9,
          children: [{name: 'skeleton', id: 37}]
        },
        {
          name: 'skeleton', id: 10,
          childList: [{name: 'skeleton', id: 38}]
        },
        {
          name: 'skeleton', id: 11,
          childList: [{name: 'skeleton', id: 39}]
        },
      ],
      navActive: 0,
      activceCate: active,
      number: "",
      bottomheight: 0,
      hightArr: [],
      toView: "",
      winHeight: 0,
      pidIndex: 0,
      intoindex: "",
      pid: '',
      newData: {},
      activeRouter: '',
    }
  },
  onLoad(options) {
    let that = this
    uni.getSystemInfo({
      success: function (res) {
        that.winHeight = res.windowHeight
      },
    });
    // #ifdef H5
    document.body.addEventListener('touchmove', function (event) {
      if (that.$route.path == '/pages/goods_cate/goods_cate') {
        event.preventDefault();
      }
    }, {
      passive: false
    });
    // #endif
    this.getAllCategory();
  },
  onShow() {
    let that = this
    let routes = getCurrentPages();
    let curRoute = routes[routes.length - 1].route;
    this.activeRouter = '/' + curRoute;
    if (uni.getStorageSync('cateNavActive')) {
      this.navActive = uni.getStorageSync('cateNavActive') - 1;
      uni.removeStorageSync('cateNavActive');
    }
    if (uni.getStorageSync('categoryId')) {
      this.pid = uni.getStorageSync('categoryId');
      uni.removeStorageSync('categoryId');
    }
    this.pid && this.navActive && setTimeout(() => this.tap(this.navActive, 'b' + this.pid), 200);
    setTimeout(() => {
      uni.removeStorageSync('categoryId');
      uni.removeStorageSync('cateNavActive');
    }, 300);

  },
  methods: {
    jumpArea(){
      uni.navigateTo({
        url: `/pages/address/areaSelector/index`
      })
    },
    infoScroll: function () {
      let that = this;
      //设置商品列表高度
      uni.getSystemInfo({
        success: function (res) {
          that.bottomheight = (res.windowHeight) * (750 / res.windowWidth) - 98;
        },
      });
      let hightArr = [];
      for (let i = 0; i < that.productList.length; i++) {
        let item = that.productList[i]
        if (!that.productList[i].childList) {
          continue;
        }
        for (let j = 0; j < that.productList[i].childList.length; j++) {
          //获取元素所在位置
          let query = uni.createSelectorQuery().in(this);
          let idView = "#b" + item.id + j;
          query.select(idView).boundingClientRect();
          query.exec(function (res) {
            if (res[0]) {
              let top = res[0].top;
              hightArr.push({top, i});
            }
          });
        }
        ;
      }
      ;
      that.hightArr = hightArr;
    },
    tap: function (index, id) {
      this.toView = '' + id + 0;
      this.navActive = index;
      setTimeout(() => {
        uni.$emit('scroll');
      }, 300);
    },
    getAllCategory: function () {
      let that = this;
      let value = ""
      that.pidIndex = 0;
      getCategoryList().then(res => {
        that.productList = res.data;
        that.$nextTick(function () {
          that.infoScroll();
        })
        that.showSkeleton = false
      })
    },
    scroll: function (e) {
      uni.$emit('scroll');
      let scrollTop = e.detail.scrollTop + 10;
      let scrollArr = this.hightArr;
      for (let i = 0; i < scrollArr.length; i++) {
        if (scrollTop >= 0 && scrollTop < scrollArr[1].top - scrollArr[0].top) {
          this.navActive = 0
        } else if (scrollTop >= scrollArr[i].top - scrollArr[0].top && scrollTop < (scrollArr[i + 1] ? scrollArr[i + 1].top : 0) - scrollArr[0].top) {
          this.navActive = scrollArr[i].i
        } else if (scrollTop >= scrollArr[scrollArr.length - 1].top - scrollArr[0].top) {
          this.navActive = scrollArr[scrollArr.length - 1].i
        }
      }
    },
    searchSubmitValue: function (e) {
      if (this.$util.trim(e.detail.value).length > 0)
        uni.navigateTo({
          animationType: animationType.type,
          animationDuration: animationType.duration,
          url: '/pages/goods/goods_list/index?searchValue=' + e.detail.value
        })
      else
        return this.$util.Tips({
          title: '请填写要搜索的产品信息'
        });
    },
  }
}
</script>
<style scoped lang="scss">
::v-deep .origin-img {
  border-radius: 50%;
}

.productSort {
  display: flex;
  flex-direction: column;
  width: 100%;

  .con-box {
    flex: 1;
    display: flex;
    overflow: hidden;
  }
}

.productSort .header {
  width: 70%;
  height: 96rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f5f5f5;
  position: relative;
  left: 28%;
}

.productSort .header .input {
  width: 100%;
  height: 60rpx;
  background-color: #f5f5f5;
  border-radius: 50rpx;
  box-sizing: border-box;
  padding: 0 25rpx;
}

.productSort .header .input .iconfont {
  font-size: 28rpx;
  color: #555;
}

.productSort .header .input .placeholder {
  color: #999;
}

.productSort .header .input input {
  font-size: 28rpx;
  height: 100%;
  width: 597rpx;
}

.productSort .header .input .input-box {
  display: flex;
  align-items: center;
  font-size: 28rpx;
  height: 100%;
  width: 597rpx;
  color: #999999;
}

.productSort .aside {
  background-color: #fff;
  overflow-y: auto;
  overflow-x: hidden;
  width: 200rpx;
  height: 100%;
  overflow: hidden;
}

.productSort .aside .item {
  height: 100rpx;
  width: 100%;
  font-size: 26rpx;
  color: #424242;
}

.productSort .aside .item_text {
  padding-left: 20rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.productSort .aside .item.on {
  background-color: #f7f7f7;
  border-left: 4rpx solid var(--view-theme);
  width: 100%;
  text-align: center;
  @include main_color(theme);
  font-weight: bold;
}

.productSort .conter {
  flex: 1;
  height: 100%;
  padding: 0 14rpx;
  background-color: #f7f7f7;
}

.productSort .conter .listw .title {
  height: 100rpx;
  align-items: center;
}

.productSort .conter .listw .title .line {
  width: 100rpx;
  height: 2rpx;
  background-color: #f0f0f0;
}

.productSort .conter .listw .title .name {
  font-size: 28rpx;
  color: #333;
  margin: 0 30rpx;
  font-weight: bold;
}

.productSort .conter .listw .title .list_title,
.productSort .conter .listw .title uni-image,
.productSort .conter .listw .title image {
  width: 110rpx;
  height: 26rpx;
  border-radius: 0;
}

.productSort .conter .list {
  flex-wrap: wrap;
  background: #fff;
  border-radius: 16rpx;
  padding-bottom: 26rpx;
}

.productSort .conter .list .item {
  width: 174rpx;
  margin-top: 26rpx;
}

.productSort .conter .list .item .picture,
.productSort .conter uni-image,
.productSort .conter .list .item image,
::v-deep .easy-loadimage {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
}

.productSort .conter .list .item .name {
  font-size: 24rpx;
  color: #333;
  height: 56rpx;
  line-height: 56rpx;
  width: 120rpx;
  text-align: center;
}
.block {
  display: inline-block;
}
</style>
